<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script type="text/javascript" src="lib/vue.js"></script>
</head>

<body>
  <div id="box">
    我是Daddy:{{ daddyName }}
    <child v-if="isCreated"></child>
  </div>

  <!-- 尔曹身与名俱灭，不废江河万古流 -->

  <script type="text/javascript">

    Vue.component("child", {
      template: `<div id="aaa">
            child--{{title}}
            <button @click="title='1111111'">change1</button>
            <button @click="title='2222222'">change2</button>

            <grandson v-if="gsLive"></grandson>
        </div>`,

      data() {
        return {
          title: "00000",
          datalist: [],
          count: 0,
          gsLive: true,
        }
      },

      methods: {},

      components: {
        grandson: {
          template: `<div>
            我是孙子{{name}}
            <button @click="name='duoshoudajun'">改名</button>
            </div>`,
          data() {
            return {
              name: "剁手大军",
            }
          },
          // beforeCreate() {
          //   console.log("grandson beforeCreate")
          // },
          // created() {
          //   console.log("grandson created")
          // },

          // beforeMount() {
          //   console.log("grandson beforeMount")
          // },
          // mounted() {
          //   console.log("grandson mounted")
          // },

          // beforeUpdate() {
          //   console.log("grandson beforeUpdate")
          // },
          // updated() {
          //   console.log("grandson updated")
          // },

          beforeDestroy() {
            console.log("grandson beforeDestroy");
          },
          destroyed() {
            console.log("grandson destroyed")
          }
        }
      },

      // beforeCreate() {
      //   console.log("beforeCreate")
      // },
      // created() {
      //   console.log("created")
      // },

      // beforeMount() {
      //   console.log("beforeMount")
      // },
      // mounted() {
      //   console.log("mounted")
      // },

      // beforeUpdate() {
      //   console.log("beforeUpdate")
      // },
      // updated() {
      //   console.log("updated")
      // },

      beforeDestroy() {
        console.log("child beforeDestroy");
      },
      destroyed() {
        console.log("child destroyed")
      }

    })

    var vm = new Vue({
      el: "#box",
      data: {
        isCreated: true,
        daddyName: "Jack Horse",
      },

      /* 创建阶段 */
      // beforeCreate() {
      //   console.log("root beforeCreate");
      // },
      // created() {
      //   console.log("root created");
      // },

      // /* 挂载阶段 */
      // beforeMount() {
      //   console.log("root beforeMount");
      // },
      // mounted() {
      //   console.log("root mounted");
      // },

      // /* 更新阶段 */
      // beforeUpdate() {
      //   console.log("root beforeUpdate");
      // },
      // updated() {
      //   console.log("root updated");
      // },

      // /* 销毁阶段 */
      // beforeDestroy() {
      //   console.log("root beforeDestroy");
      // },
      // destroyed() {
      //   console.log("root destroyed");
      // }

    })

    // vm.$mount("#box")
    //  vue组件 生命周期 ?
    //  vue组件的 钩子函数？
    //  vue组件的生命周期钩子函数？
  </script>
</body>

</html>